<template>
	<view>
		<!-- 加入购物车弹窗 -->
		<u-popup mode="bottom" :value="isShow" :mask-close-able="false" :border-radius="12">
			<view class="add-cart-view" v-if="goodsDetail.id">
				<text class="ibonfont ibonguanbi close-icon" @click="closeaddcartPop"></text>
				<view class="card-goods-info clearfix">
					<view class="float_left card-goods-img"><image :src="now_sku_data.specImage || goodsDetail.images[0]" mode="aspectFilt"></image></view>
					<view class="float_left" style="width: 420rpx;">
						<block v-if="isShowPrice">
							<view class="card-goods-priceview primary-color" v-if="!now_sku_data.enabledLadder">
								<text class="rmb-icon">¥</text>
								<text class="primary-color">
									<block v-if="now_sku_data.havActivity === 5">{{ now_sku_data.activity.activityPrice || 0 }}</block>
									<block v-else-if="now_sku_data.skuId">{{ now_sku_data.salePrice.salePrice || 0 }}</block>
									<block v-else>{{ goodsDetail.minSalePrice }}</block>
								</text>
							</view>
							<view class="lap-info clearfix" v-else>
								<view class="lap-li" v-for="(item, index) in now_sku_data.ladderPrice" :key="index">
									<view class="laprice-text">
										<span style="font-size: 20rpx;">¥</span>
										<text>{{ item.price }}</text>
									</view>
									<view class="laprice-goods-num" v-if="index + 1 === now_sku_data.ladderPrice.length">≥{{ item.from }}</view>
									<view class="laprice-goods-num" v-else>{{ item.from }}~{{ item.to }}</view>
								</view>
							</view>
						</block>
						<block v-else>
							<view class="card-goods-priceview primary-color">
								请登录
							</view>
						</block>
						<view class="activity-tag" v-if="now_sku_data.havActivity === 5">限时秒杀</view>
						<view class="card-goods-stock">
							<view class="snum-li" v-if="stockDisplay === 5">
								库存：
								<block v-if="now_sku_data.inventory">
									<text>{{now_sku_data.inventory>0?'有货':'无货'}}</text>
								</block>
								<block v-else>
									<text>{{goodsDetail.inventoryTotal>0?'有货':'无货'}}</text>
								</block>
							</view>
							<view class="snum-li" v-if="stockDisplay === 6">剩余 {{ Number(now_sku_data.inventory) || goodsDetail.inventoryTotal }}</view>
							<view class="snum-li">起订{{ now_sku_data.setNum || 1 }}</view>
							<view class="snum-li" v-if="now_sku_data.limitNum">限购{{ now_sku_data.limitNum }}</view>
						</view>
						<block v-if="goodsDetail.specType === 5">
							<view class="card-goods-unit" v-if="!now_sku_data.skuId">
								<text style="padding-right: 10upx;">请选择</text>
								<block v-for="(item, index) in goodsDetail.specGroup" :key="index">
									<text v-if="index > 0" style="padding: 0 10upx;">/</text>
									<text>{{ item.groupSpec.specName }}</text>
								</block>
							</view>
							<view class="card-goods-unit" v-else>
								已选：
								<block v-for="(item, index) in now_sku_data.specGroup" :key="index">
									<text v-if="index > 0" style="padding: 0 10upx;">/</text>
									<text>{{ item.specValueName }}</text>
								</block>
							</view>
						</block>
					</view>
				</view>
				<view class="spec-card-view">
					<view class="spec-card-li" v-for="(item, index) in goodsDetail.specGroup" :key="index">
						<view class="spec-name">{{ item.groupSpec.specName }}</view>
						<view class="spec-value-view">
							<block v-for="(itemP, indexP) in item.params" :key="indexP">
								<view
									class="spec-val-li"
									@click="bindPickerChange(itemP.specValueId, index + 1, item.groupSpec.specId, itemP)"
									:class="[parseInt(spec_id_group[index + 1]) === parseInt(itemP.specValueId) ? 'spec-val-on primary-btn-pain' : '']"
								>
									<!-- <text :style="{ color: !itemP.isdisabled ? '#999' : '' }">{{ itemP.specValueName }}</text> -->
									<text>{{ itemP.specValueName }}</text>
								</view>
							</block>
						</view>
					</view>
					<view class="buy-num-view clearfix">
						<view class="float_left">购买数量</view>
						<view class="num-edit-view float_right"><u-number-box v-model="buy_num" :input-height="44"></u-number-box></view>
					</view>
				</view>
				<view class="card-btn-view">
					<view class="clearfix">
						<view class="card-btn-li joinCart float_left" @click="addCart">加入购物车</view>
						<view @click="buyNow" class="card-btn-li float_left primary-btn">立即购买</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		goodsId: {
			type: [Number, String],
			default: 0
		},
		goodsData: {
			type: Object,
			default: () => {
				return {};
			}
		},
		skuId: {
			type: [Number, String],
			default: ''
		}
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		stockDisplay() {
			const stockDisplay = this.$store.state.basicSet.stockDisplay || 6;
			return parseInt(stockDisplay);
		},
		isShowPrice() {
			const isShowPrice = this.$store.state.basicSet.goodsPrice || 5;
			if (this.$store.state.hasLogin) {
				return true;
			} else {
				return parseInt(isShowPrice) === 5;
			}
		}
	},
	watch: {
		skuId(val) {
			if (this.goodsDetail.id) {
				const nowSkuData = this.goodsDetail.specMultiple.find(item => item.skuId === parseInt(val));
				if (nowSkuData) {
					this.spec_id_group = nowSkuData.indexGroup.map(item => {
						return parseInt(item);
					});
					this.buy_num = nowSkuData.setNum || 1;
					this.now_sku_data = nowSkuData;
				}
			}
		},
		now_sku_data(val) {
			this.$emit('skuChange', val);
		},
		goodsId(val) {
			if (this.isShow) {
				this.goodsDetail = {};
				this.now_sku_data = {};
				this.spec_id_group = [val];
				this.getGoodsDetail();
			}
		},
		async isShow(val) {
			if (val) {
				// this.goodsDetail = {};
				// this.now_sku_data = {};
				// this.spec_id_group = [this.goodsId];
				// await this.getGoodsDetail();
			} else {
				this.closeaddcartPop();
			}
		},
		buy_num(val) {
			this.$emit('buyNumchange', val);
		}
	},
	data() {
		return {
			isLogin: true, // 判断是否登录
			loginTip: false,
			spec_id_group: [],
			now_sku_data: {},
			buy_num: 1,
			base_set_info: {},
			goodsDetail: {}
		};
	},
	mounted() {
		if (this.goodsData.id) {
			this.handelDetail(this.goodsData);
		}
	},
	methods: {
		// 关闭加入购物车弹窗
		closeaddcartPop() {
			this.$emit('close', this.now_sku_data);
		},
		//选择规格
		bindPickerChange(id, index, specId, row) {
			this.$set(this.spec_id_group, index, parseInt(id));
			if (this.spec_id_group.every(item => !!item)) {
				const indexGroup = this.spec_id_group.join(':');
				const nowSkuData = this.goodsDetail.specMultiple.find(item => item.index === indexGroup);
				if (nowSkuData) {
					this.now_sku_data = nowSkuData;
				}
				// console.log('now_sku_data:', this.now_sku_data, indexGroup);
			}
			if (this.now_sku_data.setNum > this.now_sku_data.limitNum) {
				this.buy_num = this.now_sku_data.limitNum || 1;
			} else {
				this.buy_num = this.now_sku_data.setNum || 1;
			}
			if (index > 1) {
				const containSpecMultiple = this.goodsDetail.specMultiple.filter(item => item.indexGroup.includes(id + ''));
				const target = this.$u.deepClone(this.goodsDetail.specGroup);
				target.forEach(item => {
					if (item.groupSpec.specId !== specId) {
						item.params.forEach(itemP => {
							itemP.isdisabled = !!containSpecMultiple.find(itemF => {
								return itemF.indexGroup.includes(itemP.specValueId + '');
							});
						});
					}
				});
				this.goodsDetail.specGroup = target;
			}
		},
		// 加入购物车
		async addCart() {
			if (!this.hasLogin) {
				this.$u.toast('未登录');
				return;
			}
			if (!this.now_sku_data.skuId) {
				this.$u.toast('请选择商品属性');
				return;
			}
			if (this.buy_num <= 0) {
				this.$u.toast('请输入大于0的购买数量');
				return;
			}
			if (this.buy_num < this.now_sku_data.setNum) {
				this.$u.toast('该商品起订数量为' + this.now_sku_data.setNum);
				return;
			}

			this.$u.api
				.addCart({
					goodsId: this.goodsDetail.id,
					skuId: this.now_sku_data.skuId,
					buyNum: this.buy_num
				})
				.then(res => {
					this.$u.toast('加入成功');
					this.closeaddcartPop();
				});
		},
		//立即购买
		buyNow() {
			if (!this.now_sku_data.skuId) {
				this.$u.toast('请选择商品属性');
				return;
			}
			if (this.buy_num <= 0) {
				this.$u.toast('请输入大于0的购买数量');
				return;
			}
			if (this.buy_num < this.now_sku_data.setNum) {
				this.$u.toast('该商品起订数量为' + this.now_sku_data.setNum);
				return;
			}
			this.closeaddcartPop();
			const goodsId = this.goodsDetail.id;
			const skuId = this.now_sku_data.skuId;
			const activityId = 0;
			this.goPage(`/pages/order/createOrder?goodsId=${goodsId}&skuId=${skuId}&activityId=${activityId}&buyNum=${this.buy_num}`);
		},
		// 请求商品品详情
		async getGoodsDetail() {
			if (!this.goodsId) {
				return;
			}
			this.$u.api.getGoodsDetail(this.goodsId).then(({ data }) => {
				this.handelDetail(data);
			});
		},
		handelDetail(res) {
			this.$set(this.spec_id_group, 0, parseInt(res.id));
			this.goodsDetail = res;
			res.specGroup = res.specGroup.map(item => {
				return {
					...item,
					params: item.params.map(itemP => {
						return {
							...itemP,
							isdisabled: true
						};
					})
				};
			});
			this.buy_num = 1;
			if (this.skuId) {
				this.now_sku_data = res.specMultiple.find(item => item.skuId === parseInt(this.skuId));
			} else if (res.specMultiple.length === 1) {
				this.now_sku_data = res.specMultiple[0];
			} else {
				this.now_sku_data = res.specMultiple.find(item => item.isDefault === 5) || {};
			}
			if (this.now_sku_data.skuId) {
				this.spec_id_group = this.now_sku_data.indexGroup.map(item => {
					return parseInt(item);
				});
				if (this.now_sku_data.setNum > this.now_sku_data.limitNum) {
					this.buy_num = this.now_sku_data.limitNum || 1;
				} else {
					this.buy_num = this.now_sku_data.setNum || 1;
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.activity-tag {
	font-size: 20upx;
	padding: 2upx 4upx;
	background-color: $price-color;
	color: #fff;
	border-radius: 4upx;
	display: inline-block;
}
.add-cart-view {
	position: relative;
	background-color: #fff;
	padding: 30upx;
	border-top-left-radius: 8upx;
	border-top-right-radius: 8upx;
	.close-icon {
		position: absolute;
		top: 20upx;
		right: 20upx;
		color: #999;
		font-size: 40upx;
	}
	.card-goods-info {
		.card-goods-img {
			padding-right: 32upx;
			image {
				border-radius: 8upx;
				width: 230upx;
				height: 230upx;
				display: block;
			}
		}
		.lap-info {
			display: flex;
			font-size: 24upx;
			.lap-li {
				text-align: center;
				flex: 3;
				padding: 0 20upx;
				.laprice-text {
					font-size: 28upx;
					font-weight: 600;
					color: #ff4d01;
				}
			}
		}

		.card-goods-priceview {
			color: #ff4d01;
			font-weight: 600;
			font-size: 32upx;
			padding-top: 40upx;
			.rmb-icon {
				margin-right: 8upx;
				font-size: 24upx;
			}
		}
		.card-goods-stock {
			font-size: 24upx;
			color: #999999;
			padding-top: 10upx;
			.snum-li {
				padding-right: 10upx;
				display: inline-block;
				&:last-child-child {
					padding-right: 0;
				}
			}
		}
		.card-goods-unit {
			font-size: 24upx;
			padding-top: 10upx;
		}
	}
	.spec-card-view {
		height: 600upx;
		overflow-y: auto;
		.spec-card-li {
			padding: 20upx 0 0;
			border-bottom: 1px solid #f5f5f5;
			.spec-name {
				font-size: 28upx;
				padding-bottom: 20upx;
			}
			.spec-value-view {
				.spec-val-li {
					margin-left: 20upx;
					margin-bottom: 18upx;
					border-radius: 8upx;
					font-size: 26upx;
					display: inline-block;
					min-width: 52upx;
					padding: 0 22upx;
					line-height: 52upx;
					text-align: center;
					color: #4b4b4b;
					background-color: #f7f8fa;
					border: 1px solid #f7f8fa;
				}
				.spec-val-on {
					border: 1px solid $price-color;
					color: $price-color;
					background-color: #ffffff;
				}
			}
		}
	}
	.buy-num-view {
		padding: 20upx 0 100upx;
		font-size: 28upx;
		.num-edit-view {
			.u-number-input {
				background-color: #ffffff !important;
			}
			.u-icon-plus {
				border-radius: 8rpx !important;
				width: 44rpx !important;
				font-size: 24rpx;
			}
			.u-icon-disabled {
				border-radius: 8rpx !important;
				width: 44rpx !important;
				font-size: 24rpx;
			}
			.u-icon-minus {
				border-radius: 8rpx !important;
				width: 44rpx !important;
				font-size: 24rpx;
			}
		}
	}
	.card-btn-view {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9;
		width: 750upx;
		background-color: #fff;
		border-top: 1px solid #ddd;
		padding: 15upx 0;
		.no-tip {
			font-size: 22upx;
			background-color: #fdf6ec;
			color: #d48d24;
			text-align: center;
			line-height: 42upx;
		}
		.card-btn-li {
			width: 356upx;
			text-align: center;
			line-height: 86upx;
			color: #fff;
			&:first-child {
				background: linear-gradient(to right, #ff722b, #ff722b);
				margin-left: 24upx;
				border-top-left-radius: 8upx;
				border-bottom-left-radius: 8upx;
			}
			&:last-child {
				background-color: #f63434;
				border-top-right-radius: 8upx;
				border-bottom-right-radius: 8upx;
			}
		}
	}
}
</style>
